<template>
  <el-dialog
    :visible.sync="showPop"
    :close-on-click-modal="false"
    top="35vh"
  >
    <div class="pop-detail">
      <div class="close-icon" @click="showPop = false">
        <span>×</span>
      </div>
      <el-table :data="userList" border class="table">
        <el-table-column
          prop="userName"
          label="姓名"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        >
        </el-table-column>
        prop="userType"
        <el-table-column
          label="用户身份"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        >
          普通居民用户
        </el-table-column>
        <el-table-column
          prop="userPhone"
          label="联系电话"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        ></el-table-column>
        <el-table-column
          prop="alarmTypeShowName"
          label="单位名称"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        ></el-table-column>
        <el-table-column
          prop="community"
          label="所在地区"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        ></el-table-column>
        <el-table-column
          prop="userAddr"
          label="地址"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        ></el-table-column>
        <el-table-column
          prop="alarmTypeShowName"
          label="设备数"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span class="operate-text" @click="onDeatil(scope.row, 'userinfo')"
              >详情</span
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > queryParams.pageSize"
        :total="total"
        :page.sync="queryParams.currentPage"
        :limit.sync="queryParams.pageSize"
        @pagination="initTable"
        :layout="'prev, pager, next, jumper'"
      />
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios';
export default {
  name: "moreUser",
  data() {
    return {
      showPop: false, //用户详情弹窗
      // 查询参数
      queryParams: {
        pageSize: 15,
        currentPage: 1,
      },
      userList: [],
      total: 0,
    };
  },
  mounted() {},
  methods: {
    initTable() {
      axios
        .get("/hanfeng-large-screen/json/index_user_list.json")
        .then((res) => {
          if (res.errcode == 0) {
            this.userList = res.data.list ?? [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closePopup() {
      this.$emit("closePopup");
    },
    onDeatil(row, type) {
      this.$emit("openElecPopup", row, type);
    },
    // 分页pageSize变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.initTable();
    },
    // 分页pageNum变化
    handleCurrentChange(val) {
      this.queryParams.currentPage = val;
      this.initTable();
    },
  },
};
</script>

<style scoped lang="scss">
.pop-detail {
  padding: 4vh 0.8vw 1.6vh 1.4vw;
  width: 45vw;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 110;
  background: url("@/assets/image/popupbg2.png") no-repeat;
  background-size: 100% 100%;
  .close-icon {
    width: 0.18rem;
    height: 0.18rem;
    background-color: #a7caea;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000e36;
    font-weight: 700;
    position: absolute;
    right: 0.5vw;
    top: 1vh;
    cursor: pointer;
  }
  .table {
    width: 100%;
    height: 100%;
    min-height: 30vh;
    max-height: 50vh;
    overflow: auto;
  }
}
</style>
